<template>
  <div id="wslist">
    <div class="wslist-header">
      <div class="avatar">
        <img :src="userinfo.avatar || 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2561659095,299912888&fm=26&gp=0.jpg'">
      </div>
      <div class="name">{{ userinfo.name }}</div>
      <div class="des">{{ userinfo.profile }}</div>
    </div>
    <div class="wslist-body">
      <van-search v-model="value" placeholder="功能暂未开发" />
      <van-pull-refresh v-model="listStat.refreshing" @refresh="onRefresh"  :disabled="!listStat.canRreshing">
      
      <van-list v-model:loading="listStat.loading" :finished="listStat.finished"  @load="onLoad">
        <div class="talkWrap" ref="talkWrap">
        <van-swipe-cell v-for="item in talkList" :key="item" :value="item">
          <div class="talk-li" @click="talkRoom(item.ssid)">
            <div class="talk-li-img">
              <img :src="item.avatar" />
            </div>
            <div class="talk-li-name">
              {{item.name}}
            </div>
            <div class="talk-li-msg">
              {{item.lastMsg}}
            </div>
            <div class="talk-li-date">
              {{item.lastDate}}
            </div>
          </div>
          <template #right>
            <van-button square  type="danger" text="删除" class="talk-li-del" @click="delTalkLi(item.ssid)" />
          </template>
        </van-swipe-cell>
        </div>
      </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
  import {
    ref,
    reactive
  } from 'vue';
  import router from '@/router';
  export default {
    name: 'List',
    setup() {
      //获取聊天列表
      var talkList = ref([{
            name: '银枪小霸王',
            avatar: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=473058581,2564775917&fm=26&gp=0.jpg',
            lastMsg: '吃我一枪',
            lastDate: '2020-12-25 09:09:09',
            ssid : "aaaaaaaaaa",
          },
          {
            name: '行者孙',
            avatar: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3437477200,345832242&fm=26&gp=0.jpg',
            lastMsg: '我叫你一声，你敢答应吗？',
            lastDate: '2020-12-25 09:09:09',
            ssid : "bbbbbbbbbb",
          },

        ]),
        listStat = reactive({
          loading: true,
          finished: false,
          refreshing :  false,
          canRreshing : true,
        }),
        talkWrap = ref('')

      return {
        talkList,
        listStat,
        talkWrap
      }
    },
    data() {
      return {
        userinfo: window.Tls.store('userinfo').info
      }
    },
    mounted() {
      this.talkWrap.style.height = (window.innerHeight - 104 )+ 'px'
     
      this.talkWrap.addEventListener('scroll',()=>{
        if( this.talkWrap.scrollTop>0 ) this.listStat.canRreshing = false
        else this.listStat.canRreshing = true
      })
    },
    methods: {
      onLoad() {
        this.listStat.loading = false
        this.listStat.finished = true
        this.listStat.refreshing = false
      },
      onRefresh(){
        this.listStat.refreshing = true
         window.Tls.post("/talkList/list",{},{noToast:true}).then(()=>{
           this.listStat.refreshing = false
           this.talkList.unshift({
             name: '行者孙'+Math.random(),
             avatar: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3437477200,345832242&fm=26&gp=0.jpg',
             lastMsg: '我叫你一声，你敢答应吗？',
             lastDate: '2020-12-25 09:09:09',
             ssid : "bbbbbbbbbb",
           })
         }).catch(()=>{
           this.listStat.refreshing = false
           
         })
        
      },
      delTalkLi(ssid){
        window.Tls.post("/talkList/del",{ssid:ssid},{msg:'删除中..'}).then(()=>{
          for(let i in this.talkList){
            if(this.talkList[i].ssid==ssid) this.talkList.splice(i,1)
          }
        }).catch(()=>{
          alert("删除失败")
        })
        
      },
      talkRoom(ssid){
        router.push( '/room/'+ssid )
      }
    },
  }
</script>

<style scoped="">
  #wslist {
    height: 100%;
    background: #eee;
  }
 .talkWrap{
   overflow-y: scroll;
 }
  .wslist-header {
    position: relative;
    background: linear-gradient(90deg, #4787fe, #55c8f2);
    height: 50px;
    position: relative;
  }

  .avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    left: 10px;
    top: 4px;
  }

  .avatar img {
    max-width: 100%;
    max-height: 100%;
  }

  .name {
    position: absolute;
    left: 60px;
    top: 5px;
    font-size: 16px;
    color: #fff;
  }

  .des {
    position: absolute;
    left: 60px;
    top: 30px;
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
    white-space: nowrap;
    /*保证文本内容不会自动换行，如果多余的内容会在水平方向撑破单元格*/
    overflow: hidden;
    /*隐藏超出单元格的部分*/
    text-overflow: ellipsis;
    /*将被隐藏的那部分用省略号代替*/
  }
  .talk-li{
    position:relative;
    height:70px;
    margin-top:1px;
    background-color: #fff;
  }
  .talk-li-img{
    position:absolute;
    left :  5px;
    top: 5px;
    width : 60px;
    height : 60px;
    border-radius:20%;
    border:1px solid #ccc;
    overflow: hidden;
  }
  .talk-li-img img{
    width: 100%;
    height: 100%;
  }
  .talk-li-name{
    position: absolute;
    top:10px;
    left : 75px;
    font-size : 16px;
    color : #333;
  }
  .talk-li-date{
    position: absolute;
    top:14px;
    right : 5px;
    font-size : 12px;
    color : #999;
  }
  .talk-li-msg{
    position: absolute;
    top:45px;
    left : 75px;
    font-size : 12px;
    color : #696969;
    white-space: nowrap;
    /*保证文本内容不会自动换行，如果多余的内容会在水平方向撑破单元格*/
    overflow: hidden;
    /*隐藏超出单元格的部分*/
    text-overflow: ellipsis;
    /*将被隐藏的那部分用省略号代替*/
  }
  .talk-li-del{
    height: 100%;

  }
</style>
